<template>
    <div id="container">
        <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
        <div style="display: flex">
            <h2>员工账号导入</h2>
            <el-link type="success" class="el-icon-download" style="font-size: 20px;margin-left: 20px" href="http://rasx9jsp8.hn-bkt.clouddn.com/%E6%A8%A1%E6%9D%BF%20.xlsx">Excel模板下载</el-link>
        </div>
        <div class="el-upload__tip" slot="tip" style="margin: 10px;display: flex">tip: 如不按照规定填写，会添加失败</div>
        <div class="el-upload__tip" slot="tip" style="margin: 10px;display: flex">部门填写范围: 研发部、运营部、财务部、人事部、行政部</div>
        <div class="el-upload__tip" slot="tip" style="margin: 10px;display: flex">角色填写范围: 系统管理员、普通员工、部门主管、总经理</div>
        <el-upload
                ref="upload"
                style="display: flex"
                drag
                action=""
                :before-upload="beforeUploadHandle"
                :http-request="handleUploadForm"
                :auto-upload="false"
                multiple
                :limit="5">
            <i class="el-icon-upload"></i>
            <el-link icon="el-icon-paperclip" type="primary">添加需要上传的excel文件,支持扩展名.xlsx/.xls</el-link>
        </el-upload>

        <br>
        <el-button type="primary" @click="addFile" style="display: flex">提交</el-button>

        <el-dialog title="修改人员信息" :visible.sync="dialogFormVisible" width="500px" >
            <el-form :model="form">
                <el-form-item label="工号" label-width="90px">
                    <el-input v-model="form.username" autocomplete="off" placeholder="工号" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="姓名" label-width="90px">
                    <el-input v-model="form.realName" autocomplete="off" placeholder="姓名" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="90px">
                    <el-input v-model="form.mail" autocomplete="off" placeholder="邮箱"></el-input>
                </el-form-item>
                <el-form-item label="部门" label-width="90px">
                    <el-select v-model="form.department" placeholder="请选择部门">
                        <el-option
                                v-for="item in departments"
                                :key="item.departmentName"
                                :label="item.departmentName"
                                :value="item.departmentName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" label-width="90px">
                    <el-select v-model="form.role" placeholder="请选择角色">
                        <el-option
                                v-for="item in roles"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="人事状态" label-width="90px">
                    <el-select v-model="form.status" placeholder="请选择人事状态">
                        <el-option
                                v-for="item in statuses"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="直线上级" label-width="90px">
                    <el-select v-model="form.leader" placeholder="请选择直线上级">
                        <el-option
                                v-for="item in roles"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="modifyInfo">确 定</el-button>
            </div>
        </el-dialog>

        <br>
        <el-table
                :data="list"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="username"
                    label="工号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="realName"
                    label="姓名"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="mail"
                    label="邮箱"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="department"
                    label="部门"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="role"
                    label="角色"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="leader"
                    label="直线上级"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="人事状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="createDate"
                    label="注册日期"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button
                            slot="reference"
                            type="primary"
                            size="mini"
                            @click="handleClick(scope.row)">修改</el-button>
                    &nbsp;
                    <el-popconfirm title="确定重置该用户密码吗？" @confirm="sendMail(scope.row)">
                        <el-button
                                slot="reference"
                                type="danger"
                                size="mini">重置密码</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 10px">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: "UserManage",
    mounted() {
        this.getData();
    },
    data(){
        return {
            dialogFormVisible: false,
            form: {},
            departments: [],
            roles: [],
            statuses: ['在职','离职'],
            list: [],  //表格数据
            currentPage: 1,  //当前页
            pageSize: 10,  //单页记录条数
            total:0, //总记录条数
            file:[]
        }
    },
    methods:{
        getData(){
            let vm = this;
            this.axios({
                url: '/myapi/user/'+vm.currentPage+'/'+vm.pageSize,
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200){
                    console.log(response.data);
                    vm.list = response.data.data.tableData;
                    vm.total = response.data.data.total;
                }
                else if(response.data.code===2001){
                    vm.$message.error('你还未登录!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
                else if(response.data.code===4001){
                    vm.$message.error('无权限!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
            });

            this.axios({
                url: '/myapi/department',
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200){
                    console.log(response.data);
                    vm.departments = response.data.data.departments;
                }
                else if(response.data.code===2001){
                    vm.$message.error('你还未登录!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
            });

            this.axios({
                url: '/myapi/role',
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200){
                    console.log(response.data);
                    vm.roles = response.data.data.roles;
                }
                else if(response.data.code===2001){
                    vm.$message.error('你还未登录!');
                    //路由回管理员后台登录页面
                    vm.$router.push("/adminLogin")
                }
            });
        },
        handleClick(row){
                this.form = row;
                this.dialogFormVisible = true;
        },
        modifyInfo(){
            let vm = this;
            this.axios({
                url: '/myapi/user/update',
                method: 'post',
                //使用data是body传参，使用params是query传参
                data:{
                    id: vm.form.id,
                    username: vm.form.username,
                    realName: vm.form.realName,
                    mail: vm.form.mail,
                    department: vm.form.department,
                    role: vm.form.role,
                    leader: vm.form.leader,
                    status: vm.form.status,
                    createDate: vm.form.createDate
                }
            }).then(function (response) {
                if(response.data.code===200){
                    vm.dialogFormVisible = false;
                    vm.getData();
                    vm.$message.success("修改成功");
                }
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            console.log(this.pageSize);
            this.getData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            console.log(this.currentPage);
            this.getData();
        },
        sendMail(row) {
            let vm = this;
            this.axios({
                url: '/myapi/reset/password',
                method: 'post',
                //使用data是body传参，使用params是query传参
                data:{
                    id: row.id,
                    username: row.username,
                    realName: row.realName,
                    mail: row.mail,
                    department: row.department,
                    role: row.role,
                    status: row.status,
                    createDate: row.createDate
                }
            }).then(function (response) {
                console.log(response.data);
                if(response.data.code===200){
                    vm.$message({
                        duration:600,
                        message: '重置密码成功!',
                        type: 'success'
                    });
                }
            });
        },
        addFile(){
            //手动提交
            //this.$refs.upload.submit();
            let vm = this;
            let upData = new FormData();
            this.$refs.upload.submit();// 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
            this.file.forEach(function (file) {// 因为要上传多个文件，所以需要遍历
                upData.append('file', file, file.name);
            })
            vm.$axios.post('/myapi/importData',upData)
                    .then((response) => {
                        if (response.data.code===200) {
                            vm.$message.success('导入成功!');
                            vm.getData();
                        } else {
                            vm.$message.error('导入失败,请检查excel中的内容格式!');
                            vm.getData();
                        }
                    })
        },
        handleUploadForm(param) {
            this.file.push(param.file);
            /*            let thisInfo = this
                        let formData = new FormData()
                        // 在formData中加入我们需要的参数
                        formData.append('files', param.file)
                        formData.append('date', this.form.date)
                        formData.append('bdid', this.form.ins_id)
                        formData.append('uid', this.$store.state.id)
                        formData.append('textarea', this.form.textarea)
                        // 向后端发送数据
                        thisInfo.$axios.post('/myapi/user/claim/addClaim', formData).then((res) => {
                            if (res.data.success === true) {
                                thisInfo.$message.success('申请成功');
                                //thisInfo.open = false;
                                //thisInfo.getFileList();
                            } else {
                                thisInfo.$message.success('申请失败')
                            }
                        })*/
        },
        beforeUploadHandle(file) {
            // 以检查文件是否为.xlsx为例
            const fileName = file.name;
            const fileType = fileName.substring(fileName.lastIndexOf('.'));
            if (fileType === ".xlsx" || fileType === ".xls") {
                return true;
            }
            this.$message.error("只支持上传excel!");
            return false;
        },
    }
}
</script>

<style scoped>

</style>
